<template>
	<jk-dialog
		v-model="showDialog"
		:title="`${dataItem.macId ? dataItem.macId + '号' : '无'}-详情`"
		width="1100px"
		append-to-body
		:show-close-btn="true"
		:show-confirm-btn="false"
		:show-cancel-btn="false"
		@on-close="onVisibleChange(false)"
		@on-visible-change="onVisibleChange"
	>
		<el-tabs type="border-card">
			<el-tab-pane label="常规">
				<span slot="label"><i class="el-icon-document"></i> 常规</span>
				<el-form ref="ruleForm" label-width="110px">
					<el-tag type="primary" effect="plain" class="margin-bottom-4">
						<span class="el-icon-tickets item-gap"></span>
						<span>基本信息</span>
					</el-tag>
					<jk-card class="margin-bottom-10">
						<el-row>
							<el-col :span="8">
								<el-form-item class="margin-bottom-10" label="设备运行状态">
									<span class="read-only-2">{{ stateList.find(x => x.id === Number(ruleForm.CurMachineStatus)) ? stateList.find(x => x.id === Number(ruleForm.CurMachineStatus)).name : '' }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item class="margin-bottom-10" label="纺纱长度">
									<span class="read-only-2">{{ ruleForm.doffLength || 0 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item class="margin-bottom-10" label="罗拉速度">
									<span class="read-only-2">{{ ruleForm.averageSpeed || 0 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item class="margin-bottom-10" label="平均锭速">
									<span class="read-only-2">{{ ruleForm.averageSpeed || 0 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item class="margin-bottom-10" label="运行时间">
									<span class="read-only-2">{{ ruleForm.runningDuration || 0 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item class="margin-bottom-10" label="落纱时间">
									<span class="read-only-2">{{ ruleForm.doffCountDown || 0 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item class="margin-bottom-0" label="运行进度">
									<span class="read-only-2">{{ ruleForm.runningSpeed || 0 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item class="margin-bottom-0" label="实时重量">
									<span class="read-only-2">{{ ruleForm.realActualWeight || 0 }}</span>
								</el-form-item>
							</el-col>
						</el-row>
					</jk-card>
					<el-tag type="primary" effect="plain" class="margin-bottom-4">
						<span class="el-icon-tickets item-gap"></span>
						<span>异常信息</span>
					</el-tag>
					<jk-card class="margin-bottom-10">
						<el-row>
							<el-col :span="8">
								<el-form-item class="margin-bottom-10" label="实时断纱">
									<span class="read-only-2">{{ ruleForm.realTimeBreakNum || 0 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item class="margin-bottom-10" label="实时弱捻数量">
									<span class="read-only-2">{{ ruleForm.realTimeWeakNum || 0 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item class="margin-bottom-10" label="实时停用数量">
									<span class="read-only-2">{{ ruleForm.realTimeStopNum || 0 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item class="margin-bottom-0" label="实时空置数量">
									<span class="read-only-2">{{ ruleForm.realTimeFreeNum || 0 }}</span>
								</el-form-item>
							</el-col>
						</el-row>
					</jk-card>
					<el-tag type="primary" effect="plain" class="margin-bottom-4">
						<span class="el-icon-tickets item-gap"></span>
						<span>环境与能耗</span>
					</el-tag>
					<jk-card>
						<el-row>
							<el-col :span="8">
								<el-form-item class="margin-bottom-10" label="温度">
									<span class="read-only-2">{{ ruleForm.temperature || 0 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item class="margin-bottom-10" label="湿度">
									<span class="read-only-2">{{ ruleForm.humidness || 0 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item class="margin-bottom-10" label="噪声">
									<span class="read-only-2">{{ ruleForm.noise || 0 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item class="margin-bottom-0" label="电流">
									<span class="read-only-2">{{ ruleForm.electricity || 0 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item class="margin-bottom-0" label="功率">
									<span class="read-only-2">{{ ruleForm.power || 0 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item class="margin-bottom-0" label="总电能">
									<span class="read-only-2">{{ ruleForm.electricEnergyCount || 0 }}</span>
								</el-form-item>
							</el-col>
						</el-row>
					</jk-card>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="弱捻">
				<span slot="label"><i class="el-icon-reading"></i> 弱捻</span>
				<header ref="box3" class="flex-end-center margin-bottom-4">
					<jk-search-button @click="getRnListRequest"></jk-search-button>
				</header>
				<jk-table border :loading="tableLoading" :data="rnTableData" :height="dialogTableHeight - 150">
					<vxe-column title="序号" type="seq" align="center" :width="50" />
					<vxe-column title="机台" align="center" field="macId" :width="50" />
					<vxe-column title="弱捻发送时间" align="left" field="starttime" :min-width="110" />
					<vxe-column title="弱捻锭号" align="right" field="spindleId" :min-width="90" />
					<vxe-column title="弱捻恢复时间" align="right" field="endtime" :min-width="100" />
					<vxe-column title="弱捻时长(分)" align="right" field="totalTime" :min-width="100" />
				</jk-table>
				<footer ref="box2" class="flex-end-center margin-top-10">
					<jk-page
						:page-index="rnSearchParams.pageNo"
						:page-sizes="rnSearchParams.pageSizes"
						:page-size="rnSearchParams.pageSize"
						:total="rnSearchParams.totalCount"
						layout="total, prev, pager, next"
						@on-change="onRnPageChange"
					/>
				</footer>
			</el-tab-pane>
			<el-tab-pane label="落纱">
				<span slot="label"><i class="el-icon-files"></i> 落纱</span>
				<header ref="box4" class="flex-end-center margin-bottom-4">
					<jk-search-button @click="getLsListRequest"></jk-search-button>
				</header>
				<jk-table border :loading="tableLoading" :data="lsTableData" :height="dialogTableHeight - 150">
					<vxe-column title="序号" type="seq" align="center" :width="50" />
					<vxe-column title="机台" align="center" field="macId" :width="50" />
					<vxe-column title="启动时间" align="left" field="startTime" :width="150" />
					<vxe-column title="结束时间" align="left" field="endTime" :width="150" />
					<vxe-column title="用时" align="right" field="doffEndHour" :width="70" />
					<vxe-column title="落纱断纱" align="right" field="doffBreak" :min-width="80" />
					<vxe-column title="启动断纱" align="right" field="startBreak" :min-width="80" />
					<vxe-column title="干锭时" align="right" field="retentionRate" :min-width="80" />
					<vxe-column title="总断纱" align="right" field="breakCount" :min-width="80" />
					<vxe-column title="实际总量" align="right" field="actualWeight" :min-width="80" />
					<vxe-column title="理论重量" align="right" field="theoreticalWeight" :min-width="80" />
					<vxe-column title="效率" align="right" field="ratio" :min-width="70" />
				</jk-table>
				<footer ref="box2" class="flex-end-center margin-top-10">
					<jk-page
						:page-index="lsSearchParams.pageNo"
						:page-sizes="lsSearchParams.pageSizes"
						:page-size="lsSearchParams.pageSize"
						:total="lsSearchParams.totalCount"
						layout="total, prev, pager, next"
						@on-change="onLsPageChange"
					/>
				</footer>
			</el-tab-pane>
		</el-tabs>
	</jk-dialog>
</template>

<script>
    import calHeight from '/src/mixins/cal-dialog-height';
    import { pageConfig } from '../../../utils/jk/jk-tool';
    import { krGetDoffDataPage, krGetWeakReportPage } from '../../../api/production/xsReport';
    export default {
        props: {
            dialogState: {
                type: Boolean,
                default: false
            },
            dataItem: {
                type: Object,
                default() {
                    return {};
                }
            },
            stateList: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        mixins: [calHeight],
        data() {
            return {
                rnSearchParams: {
                    totalCount: 0,
                    pageNo: pageConfig.pageNo,
                    pageSize: pageConfig.pageSize,
                    machineId: '',
                    ifTest: process.env.VUE_APP_MODE === 'development'
                },
                lsSearchParams: {
                    totalCount: 0,
                    pageNo: pageConfig.pageNo,
                    pageSize: pageConfig.pageSize,
                    machineId: '',
                    ifTest: process.env.VUE_APP_MODE === 'development'
                },
                lsTableData: [],
                rnTableData: [],
                tableLoading: false,
                showDialog: false,
                ruleForm: {}
            };
        },
        methods: {
            onRnPageChange(e) {
                this.rnSearchParams.pageNo = e;
                this.getRnListRequest();
            },
            onLsPageChange(e) {
                this.rnSearchParams.pageNo = e;
                this.getLsListRequest();
            },
            /** 弱捻 */
            getRnListRequest() {
                this.tableLoading = true;
                return krGetWeakReportPage(this.rnSearchParams).then(res => {
                    this.tableLoading = false;
                    if (res.data.status === 200) {
                        this.rnTableData = res.data.res;
                        this.rnSearchParams.totalCount = res.data.count;
                    }
                });
            },
            /** 落纱 */
            getLsListRequest() {
                this.tableLoading = true;
                return krGetDoffDataPage(this.lsSearchParams).then(res => {
                    this.tableLoading = false;
                    if (res.data.status === 200) {
                        this.lsTableData = res.data.res;
                        this.lsSearchParams.totalCount = res.data.count;
                    }
                });
            },
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    Object.assign(this.$data, this.$options.data());
                }
            }
        },
        watch: {
            dialogState(newVal) {
                if (newVal) {
                    const cpData = JSON.parse(JSON.stringify(this.dataItem));
                    this.rnSearchParams.machineId = cpData.macId;
                    this.lsSearchParams.machineId = cpData.macId;
                    this.ruleForm = cpData;
                    this.getRnListRequest();
                    this.getLsListRequest();
                }
                this.showDialog = newVal;
            }
        }
    };
</script>
